<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收集表单数据</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <form @submit.prevent="demo">
         账号：   <input type="text" name="account" v-model.trim="userInfo.account"/> <br/><br/>
         密码：   <input type="text" name="password" v-model="userInfo.password"/> <br/><br/>
         年龄：   <input type="number" name="age" v-model.number="userInfo.age"/> <br/><br/>
         性别：  <input type="radio" name="sex" v-model="userInfo.sex" value="female"/> 男 
         <input v-model="userInfo.sex" name="sex" type="radio" value="male"/> 女 <br/><br/>
         爱好： 
        <input type="checkbox" name="hobby" v-model="userInfo.hobby" value="study"/> 学习
        <input type="checkbox" name="hobby" v-model="userInfo.hobby" value="play"/>  打游戏
        <input type="checkbox" name="hobby" v-model="userInfo.hobby" value="eat"/>  吃饭
        <br/><br/>
        所属校区：<select v-model="userInfo.regin" name="regin">
            <option>请选择</option>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="shenzhen">深圳</option>
            <option value="wuhan">武汉</option>
        </select><br/><br/>
        其它信息：<textarea name="other" v-model.lazy="userInfo.other">
        </textarea><br/><br/>
        <input type="checkbox" name="info" v-model="userInfo.hinfo"/>阅读并接受<a href="">《用户协议》</a><br/><br/>
        <button>提交</button>
    </form>
         



        </form>
    </div>


</body>
<script type="text/javascript">
    Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
new Vue({
  el:'#root', 
  data: { 
    userInfo:{
        account:'',
        password:'',
        age: '',
        sex:'',
        hobby:[],
        regin:'',
        other:'',
        hinfo:''
    }
  },
  methods: {
    demo(){
console.log(JSON.stringify(this.userInfo));
    }
  },
})

</script>
</html>